<script setup lang="ts">
import {ref} from "vue";
import MyAxios from "../plugins/myAxios.ts";
import {Toast} from "vant";
import {useRouter} from "vue-router";

const initFormData = {
  "userAccount": "",
  "userPassword": "",
  "checkPassword": "",
  "avatarUrl": ""
}

const addUserData = ref({...initFormData})

const  router = useRouter();

const onSubmit = async () => {
  const postData ={
    ...addUserData.value,
  }
  const res = await MyAxios.post('/user/register', postData)
  if (res.code === 0) {
    Toast.success('创建用户成功')
    router.push({
      path: '/user',
      replace: true
    })
  } else {
    Toast.fail(res.description)
  }
};

</script>

<template>
  <div id="teamCreatePage">
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
            v-model="addUserData.userAccount"
            name="teamName"
            label="用户账号"
            placeholder="用户账号"
            :rules="[{ required: true, message: '请填写用户账号' }]"
        />

        <van-field v-model="addUserData.userPassword"
                   type="password"
                   name="teamPassword"
                   label="用户密码"
                   placeholder="请填写用户密码"
                   :rules="[{ required: true, message: '请填写用户密码' }]"
        />

        <van-field v-model="addUserData.checkPassword"
                   type="password"
                   name="teamPassword"
                   label="确认密码"
                   placeholder="请填写确认密码"
                   :rules="[{ required: true, message: '请填写确认密码' }]"
        />

      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<style scoped>

</style>